import React, { useEffect, useState } from "react";
import { Modal,Spin} from 'antd';
import {getSubjectById} from 'api/index'

import SubjectComponent from "./subjectDialog";


const PreviewSubject = (props) => {
  const {isModalVisible, setIsModalVisible,id} = props

  const [showMore,setShow] = useState(false)
  const [spinning,setSpinning] = useState(false)
  const [subjectItem,setSubjectItem] = useState({})

  useEffect(()=>{
       if(id&&isModalVisible){
        setSpinning(true)
        const getItem = async() => {
            const res = await getSubjectById(id)
            setSubjectItem(res.result)
            setSpinning(false)
         }
         getItem()
       }
  },[isModalVisible]) // eslint-disable-line react-hooks/exhaustive-deps

  const handleOk = async () => {
    setIsModalVisible(false);
  }

  const handleCancel = () => {
    setIsModalVisible(false);
  };

  
  return   <Modal destroyOnClose width={940}  wrapClassName="modal-preview-subject"  title="题目预览" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
    {
      spinning?<Spin tip="Loading..." spinning={spinning}></Spin>:<SubjectComponent subjectItem={subjectItem} setShow={setShow} showMore={showMore}></SubjectComponent>
    }
   </Modal>

}
export default PreviewSubject